@import "compass";
@import "compass-placeholders";


//// METRICS ////

$grid: 4px;
$column-width: 45 * $grid;
$gutter: 3 * $grid;


//// COLORS ////

@import "base/colors";
@import "base/typography";


//// SPRITES ////

$graphics-spacing: 5 * $grid;
@import "graphics/*.png";

$graphics-2x-spacing: 10 * $grid;
@import "graphics-2x/*.png";

.graphics-sprite {
  background-size: graphics-sprite-width(livingstyleguide);
}


//// MIXINS ////

@mixin for-phones {
  @media all and (max-width: 640px) {
    @content;
  }
}

@mixin for-phones-portrait {
  @media all and (max-width: 480px) {
    @content;
  }
}

@mixin for-phones-landscape {
  @media all and (min-width: 481px) and (max-width: 640px) {
    @content;
  }
}

@mixin for-tablets {
  @media all and (min-width: 641px) and (max-width: 1024px) {
    @content;
  }
}

@mixin for-tablets-portrait {
  @media all and (min-width: 641px) and (max-width: 768px) {
    @content;
  }
}

@mixin for-tablets-landscape {
  @media all and (min-width: 769px) and (max-width: 1024px) {
    @content;
  }
}

@mixin for-tablets-landscape-and-desktops {
  @media all and (min-width: 1024px) {
    @content;
  }
}

@mixin for-desktops {
  @media all and (min-width: 1025px) {
    @content;
  }
}

@mixin for-hires {
  @media only all and (-webkit-min-device-pixel-ratio: 1.3), only all and (min--moz-device-pixel-ratio: 1.3), only all and (-o-min-device-pixel-ratio: 1.3 / 1), only all and (min-device-pixel-ratio: 1.3), only all and (min-resolution: 1.3dppx) {
    @content;
  }
}


//// RESET EVERYTHING ////

* {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  color: inherit;
  display: block;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: inherit;
  text-decoration: none;
  vertical-align: baseline;
  @include box-sizing(border-box);
}

head,
script,
style {
  display: none;
}


/// HEADER ////

.header--logo {
  display: block;
  margin-left: -32px;
  position: relative;
  @include graphics-sprite(livingstyleguide, $dimensions: true);
}

.header--version {
  color: $gray;
  display: none;
  font-size: 1.5rem;
  font-weight: bold;
  position: absolute;
  right: -1em;
  top: 0;

  @include for-phones {
    right: 0;
    top: -1em;
  }
}

.header--slogan {
  color: $light-pink;
  font-weight: bold;
  margin: auto;
  padding-top: 220px;
  width: 300px;
}


//// INSTALLATION ////

.installation {
  color: $turquoise;
  font-family: courier new, courier, monospace;
  font-size: 2.5rem;
  margin: 2em 0;

  @media all and (max-width: 800px) {
    font-size: 1.5rem;
  }

  &::before {
    color: mix($turquoise, $white, 30%);
    content: ">";
    margin: 1px 0 0 -1em;
    position: absolute;
  }
}


//// FOOTER ////

.footer {
  margin: 16 * $grid 0;
  text-align: center;
}

.footer--made-in-berlin {
  display: inline-block;
  margin: 0 45px;
  opacity: 0.7;
  vertical-align: bottom;
  @include graphics-sprite(made-in-berlin, $dimensions: true);
  @include transition(opacity, 0.2s);
  @include hide-text;
  @include for-hires {
    background-image: $graphics-2x-sprites;
  }

  &:hover {
    opacity: 1;
  }
}

.footer--made-by-hagenburger {
  @extend .footer--made-in-berlin;
  @include graphics-sprite(hagenburger, $dimensions: true);
}

.footer--contact {
  color: $gray;
  display: block;
  font-size: 1rem;
  font-weight: normal;
  letter-spacing: 1px;
  margin: (15 * $grid) auto 0;
  text-transform: uppercase;
  width: 10em;
  @include transition(color, 0.2s);
  &:hover {
    color: $turquoise;
  }
}


//// COMPONENTS ////

@import "components/layout";
@import "components/markdown";
@import "components/diamonds";
@import "components/links";
@import "components/blog";
@import "components/social-buttons";
